#mg-List {
  width: 100%;
  height: auto;
  margin: 10px auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;

  .mg-page-item {
    margin: 10px 15px;
    width: 150px;
    height: 240px;
    break-inside: avoid;

    .mg-cover-box {
      width: 100%;
      height: 200px;
      border: 1px solid #f4f4f4;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
      transition: transform 0.3s ease; /* 使用过渡效果 */
      position: relative;

      .mg-text-box {
        opacity: 0.7;
        font-size: 12px;
        position: absolute;
        bottom: 0;
        right: 0;
        color: black;
        background: #ffffff;
      }
    }

    .mg-cover-box:hover {
      transform: scale(1.1); /* 鼠标悬停时放大盒子 */
      cursor: pointer;
    }

    .mg-cover-box img {
      width: 100%;
      height: 100%;
      object-fit: fill;
    }

    .mg-title {
      margin-top: 5px;
      width: 100%;
      height: 20px;
      font-size: small;
      font-weight: bold;
    }

    .mg-title:hover {
      color: #3c8dbc;
      cursor: pointer;
    }

    .mg-time {
      width: 100%;
      font-size: 10px;
      color: #727272;
    }

  }

}